<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0
			padding:0;
		}
		.lable{
			width: 150px
			display:inline-block;
			text-align: right;
			font-size: 800;

		}
		.item{
			margin: 10px 2px;
			    height: 30px;
		}
		input{
			height: 20px;
			border-radius: 5px
		}
		.item > a{
			text-align: 
		}


	</style>
</head>
<body>
	<div id="root">
		<form>
			<div class="item">
				<label for="userName">用户名</label>
				<input type="text" id="userName">
			</div>
			<div class="item">
				<label for="pass">密码</label>
				<input type="password" id="pass">
			</div>

			<div class="item">
				<lable></lable>
				<a href="javascript:valify()">提交</a>


			</form>

			<script>
				function id(a) {
					return document.getElementById(a);
				}
				function isLetter(c) {
					var zf ="abcdefjhijklmnopkrstuvwkyz";
					return zf.indexOf(c)!=-1;
				}


				//验证表单的内容是否合法
				function valify(argument) {
					//用户名必须是5-16位的英文字母
					var unl =id('userName').value.length;
					var vvv =id('userName').value;
				
					if(unl<5 ||unl>16){
						alert("你的用户名不对");
					}else {
                        for(var i=0;i<unl;i++){
                         var iszf = isLetter (vvv[i]);
                         if(!iszf){
                         	alert("只能用英文");
                         	break;
                         }
                        }
					}
					
				}

			</script>
		</div>
	</body>
	</html>